Context

The documentation mentions support for multi-route/multi-layout modes being planned in the future.
Given that we'd like to start using this functionality, we'd be happy to contribute it.

Changes & Results

Updated ModeRoute (platform/app/src/routes/Mode/Mode.tsx) to accept an optional modeRoutePath prop

• If not passed, the route falls back to previous behaviour (rendering the first route of a given mode)
• if passed, ModeRoute tries to render a route object with the matching path parameter from mode.routes
• If a matching route is not present for some reason, the component throws an error

Updated buildModeRoutes logic (platform/app/src/routes/buildModeRoutes.tsx)

In addition to generating & registering /{mode.routeName} and /{mode.routeName}/{dataSourceID} paths, we generate & register for each route in a mode

• a /{mode.routeName}/{mode.route[n].path} route
• for each Data Source, a /{mode.routeName}/{mode.route[n].path}/{dataSourceID} path

Given that we still register the /{mode.routeName} and /{mode.routeName}/{dataSourceID} paths, the router retains previous functionality.

Testing

• Check out this PR
• Install the bundled basic-dev-mode or temporarily add the following to the longitudinal mode's (modes/longitudinal/src/index.ts) routes:

{
  path: 'panelless',
  /*init: ({ servicesManager, extensionManager }) => {
    //defaultViewerRouteInit
  },*/
  layoutTemplate: () => {
    return {
      id: 'some-other-id',
      props: {
        leftPanels: [],
        rightPanels: [],
        rightPanelClosed: true,
        leftPanelClosed: true,
        viewports: [
          {
            namespace: tracked.viewport,
            displaySetsToDisplay: [ohif.sopClassHandler],
          },
        ],
      },
    };
  },
},

• yarn dev
• Open one of the default demo cases, eg. http://localhost:3000/viewer?StudyInstanceUIDs=2.16.840.1.114362.1.11972228.22789312658.616067305.306.2

⚠️ The following steps are written assuming you chose to modify the longitudinal mode. Please modify URL-s as appropriate in case you installed the basic dev mode instead.

• Confirm the default mode route still works on the bare /viewer?... URL
• Confirm the default dataset-specific route (/viewer/dicomweb?....) still works
• Confirm the explicit longitudinal route (/viewer/longitudinal?....) works
• Confirm the newly added route (viewer/panelless?...) works and renders without any side panels
• Confirm the newly added route works with the explicit datasource suffix (viewer/panelless/dicomweb?...)

Checklist

PR

• feat(ModeRoute): add support for rendering an explicit route

• feat(buildModeRoutes): generate an explicit route mapping for each route in a mode

• My Pull Request title is descriptive, accurate and follows the
  semantic-release format and guidelines.

Code

• My code has been well-documented (function documentation, inline comments,
  etc.)

Public Documentation Updates

• The documentation page has been updated as necessary for any public API
  additions or removals.

Tested Environment

• OS: MacOS 14.0
• Node version: v18.14.2
• Browser: Chrome 126.0.6478.185